<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/28/028
  Time: 16:55
  To change this template use File | Settings | File Templates.
--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>学生成绩编辑</title>

    <!--data table-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/xadmin.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.css" />

    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style-responsive.css" rel="stylesheet">

    <%--<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>--%>
    <script src="${pageContext.request.contextPath}/static/js/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/xadmin.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/static/js/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/respond.min.js"></script>

    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
</head>

<body class="sticky-header" style="background: #e4e7ea">

<section>
     <!--主题部分-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            学生成绩编辑表
                            <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                        </header>
                        <div class="panel-body">
                            <div class="adv-table editable-table ">
                                <div class="clearfix">
                                    <div class="btn-group" style="color: green">
                                        <button id="editable-sample_new" class="btn btn-primary" onclick="addStudentGrade()">
                                            &nbsp;录入学生成绩<i class="fa fa-plus"></i></button>
                                        <select id="selSubject">

                                        </select>
                                    </div>

                                    <%--用于条件搜索--%>
                                    <div class="btn-group pull-right">
                                        <input type="text" id="searchInput" placeholder="请根据姓名，学号查询">
                                        <button class="button" onclick="search()">搜索</i>
                                        </button>
                                    </div>
                                </div>
                                <div class="space15"></div>
                                <table class="table table-striped table-hover table-bordered" <%--id="editable-sample"--%>>
                                    <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>姓名</th>
                                        <th>学号</th>
                                        <th>科目名称</th>
                                        <th>平时成绩</th>
                                        <th>考试成绩</th>
                                        <th>总成绩</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <%--展示学生信息--%>
                                    <tbody id="studentGradeTable">

                                    </tbody>
                                </table>

                                <%--分页区域--%>
                                <div class="margin">
                                    每一页显示<select id="pageSizeSelect" onchange="onSelectChange()">
                                    <option value="5" selected="selected">5</option>
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                </select>条数据，当前是第<span id="currentPageSpan" ></span> 页，
                                    总共<span id="totalPageSpan" ></span> 页
                                    <button class="button" onclick="firstPage()">首页</button>
                                    <button class="button" onclick="prePage()">上一页</button>
                                    <button class="button" onclick="nextPage()">下一页</button>
                                    <button class="button" onclick="lastPage()">尾页</button>
                                </div>

                                <%--编辑学生成绩的模态框--%>
                                <div class="modal" id="editModal">
                                    <%--对话模态框--%>
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4>学生成绩编辑</h4>
                                            </div>
                                            <div class="modal-body">
                                                <label class="control-label">学生学号</label>
                                                <input type="text" id="stuNumInput" class="form-control" placeholder="请输入学生学号">
                                                <label class="control-label">学生姓名</label>
                                                <input type="text" id="nameInput" class="form-control" placeholder="请输入学生姓名" onblur="if(this.value.replace(/^ + | + $/g,'')=='')alert('姓名不能为空!!')">
                                                <label class="control-label">请选择科目名称</label>
                                                <select id="subjectNameSelect" class="form-control">

                                                </select>
                                                <label class="control-label">请选择平时成绩总分(总分为100分)</label>
                                                <select id="usualScoreSelect" class="form-control">
                                                    <option value="20">20</option>
                                                    <option value="30">30</option>
                                                    <option value="40">40</option>
                                                </select>
                                                <label class="control-label">平时成绩</label>
                                                <input type="text" id="usualscoreInput" class="form-control" placeholder="请录入学生平时成绩">
                                                <label class="control-label">考试成绩</label>
                                                <input type="text" id="examscoreInput" class="form-control" placeholder="请录入学生考试成绩" >
                                                <label class="control-label">最终总成绩</label>
                                                <input type="text" id="finalscoreInput" class="form-control" placeholder="请录入学生最终总成绩" >
                                                <input type="hidden" id="gradeIdInput" ><%--方便后面获取gradeId，进行操作--%>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="button" data-dismiss="modal">取消</button>
                                                <button class="button" onclick="editConfirm()">确定</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--主题部分结束-->

</section>
</body>

<!-- 将js放在文档的末尾，这样页面加载速度更快 -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.10.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/modernizr.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.nicescroll.js"></script>

<!--数据表-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.js"></script>

<!--所有页面的通用脚本-->
<script src="${pageContext.request.contextPath}/static/js/scripts.js"></script>

<!--可编辑表的脚本-->
<script src="${pageContext.request.contextPath}/static/js/editable-table.js"></script>

<!--  JAVASCRIPTS 结束 -->
<script>
    jQuery(document).ready(function() {
        EditableTable.init();
    });

    //文档加载事件
    $(function () {
        loadGradeTable();
        selSubjectsByCollegeId();
    });
    //分页准备
    //当前页数
    var currentPage = 1;
    //默认每页的记录个数
    var pageSize = 5;
    //总共页数
    var totalPage;
    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();

        loadGradeTable();
    }
    //首页回调函数
    function firstPage() {
        currentPage = 1;
        var searchValue = $("#searchInput").val();
        if (searchValue == null){
            loadGradeTable();
        }else {
            search();
        }
    }
    //上一页回调函数
    function prePage() {
        currentPage--;
        if (currentPage < 1){
            currentPage = 1;
        }
        loadGradeTable();
    }
    //下一页回调函数
    function nextPage() {
        currentPage++;
        if (currentPage > totalPage){
            currentPage = totalPage;
        }
        loadGradeTable();
    }
    //尾页回调函数
    function lastPage() {
        currentPage = totalPage;
        loadGradeTable();
    }


    //分页函数
      var collegeId = ${collegeId};
    if (collegeId== 1){
        var subjectValue = "JAVA面向对象核心编程";
    }else if (collegeId == 2){
        var subjectValue = "C语言基础";
    }else if (collegeId == 3){
        var subjectValue = "HTML5";
    }
      function loadGradeTable() {
        $.ajax({
            url:"${pageContext.request.contextPath}/page/loadGradeTable",
            type:'get',
            data: {
                "classId":${classId},
                "subjectName":subjectValue,
                "currentPage":currentPage,
                "pageSize":pageSize
            },
            dataType:'json',
            success:function (result) {
                if (result.code==0){
                    showList(result.gradeList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        })
    }

     //通过学院id查询科目
    function selSubjectsByCollegeId(){
        $.ajax({
            url:"${pageContext.request.contextPath}/page/selSubjectsByCollegeId",
            type:'get',
            data:{
                "collegeId":${collegeId},
            },
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    showSubjects(result.subjectList);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        });
    }
    /*展示科目名称*/
    function showSubjects(subjectList) {
        var html = '';
        html += "<option value='0'>---请选择科目---</option>";
        for (var i = 0;i < subjectList.length;i++){
            //获取到一个班级的信息
            var item = subjectList[i];
            html += "<option value='"+ item.name + "'>" + item.name +"</option>";
        }
        $("#selSubject").html(html);
        $("#subjectNameSelect").html(html);
    }

    //根据科目展示学生成绩
    $("#selSubject").change(function() {
        var subjectNameValue = $("#selSubject").val();
        subjectValue = subjectNameValue;
        loadGradeTable();
    });

    //显示学生成绩表单
    function showList(gradeList) {
        var html = '';
        if(gradeList != 0) {
            //遍历gradeList数组
            for (var i = 0; i < gradeList.length; i++) {
                //获取到一个用户的信息
                var item = gradeList[i];
                html += "<tr>";
                html += "<td>" + item.grade.gradeId + "</td>";
                html += "<td>" + item.name + "</td>";
                html += "<td>" + item.stuNum + "</td>";
                html += "<td>" + item.grade.subjectName + "</td>";
                html += "<td>" + item.grade.usualScore + "</td>";
                html += "<td>" + item.grade.examScore + "</td>";
                html += "<td>" + item.grade.finalScore + "</td>";
                //alert(item.classId);
                html += "<td><a  onclick='getStudentGrade(\"" + item.grade.gradeId + '\",\"' + item.classId+ "\")'>编辑</a></td>";
                html += "</tr>";
            }
        }else {
            html += "<tr><td colspan='8'>您所查询的记录不存在或者还未考试，请重新查询</td></tr>"
        }
        //展示到<tbody id="td">标签中
        $("#studentGradeTable").html(html);
    };


    //添加学生成绩
    function addStudentGrade() {
             showEditModel();
    }


    //学生成绩添加，编辑模态框
    function showEditModel(gradeEdit) {
        if(gradeEdit != null ){
            $("#gradeIdInput").val(gradeEdit.grade.gradeId);
            $("#nameInput").val(gradeEdit.name);
            $("#stuNumInput").val(gradeEdit.stuNum);
            $("#subjectNameSelect").val(gradeEdit.grade.subjectName);
            $("#usualscoreInput").val(gradeEdit.grade.usualScore);
            $("#examscoreInput").val(gradeEdit.grade.examScore);
            $("#finalscoreInput").val(gradeEdit.grade.finalScore);
            $("#stuNumInput").attr("disabled","disabled");
            $("#nameInput").attr("disabled","disabled");
            $("#subjectNameSelect").attr("disabled","disabled");
            $("#finalscoreInput").attr("disabled","disabled");
        }else {
            $("#gradeIdInput").val(0);
            $("#nameInput").val("");
            $("#stuNumInput").val("");
            $("#subjectNameSelect").val(0);
            $("#usualscoreInput").val("");
            $("#examscoreInput").val("");
            $("#finalscoreInput").val("");
            $("#stuNumInput").removeAttr("disabled");
            $("#nameInput").removeAttr("disabled");
            $("#subjectNameSelect").removeAttr("disabled");
            $("#finalscoreInput").attr("disabled","disabled");
        }
        $("#editModal").modal("show");
    }

    //学生成绩添加，修改函数
    function editConfirm() {
        var gradeIdValue = $("#gradeIdInput").val();
        var stuNumValue = $("#stuNumInput").val();
        var nameValue = $("#nameInput").val();
        var subjectName = $("#subjectNameSelect").val();
        var usualscoreValue = $("#usualscoreInput").val();
        var examscoreValue = $("#examscoreInput").val();
        var usualScoreSelectValue = $("#usualScoreSelect").val();
        //var examScore = 100 - usualScoreSelectValue;
        if (usualscoreValue > usualScoreSelectValue || usualscoreValue < 0 || examscoreValue > 100 - usualScoreSelectValue || examscoreValue < 0){
            layer.msg("输入的成绩不符合规范，请重新输入",{icon: 5,time:2000})
        }else {
            $.ajax({
                url:"${pageContext.request.contextPath}/page/editGrade",
                type:'post',
                contentType:'application/x-www-form-urlencoded',//指明是一个表单格式
                data: {
                    gradeId:gradeIdValue,
                    stuNum:stuNumValue,
                    name:nameValue,
                    subjectName:subjectName,
                    usualscore:usualscoreValue,
                    examscore:examscoreValue
                },
                dataType: 'json',
                success:function (info) {
                    if (info.code== -1) {
                        layer.msg(info.message,{icon: 5,time:3000});
                    }else if (info.code == -2){
                        layer.msg(info.message,{icon: 5,time:4000});
                    }else if (info.code == -3){
                        layer.msg(info.message,{icon: 5,time:4000});
                    }else if (info.code == 0){
                        layer.msg(info.message, {
                            icon: 1,time:2000,
                        }, function() {
                            $("#editModal").modal("hide");
                            loadGradeTable();
                        });
                    }else if (info.code == -4){
                        layer.msg(info.message,{icon: 5,time:4000});
                    }
                },
                error:function (info) {

                }
            })
        }

    }

    /*获取一个学生成绩模态框*/
    function getStudentGrade(gradeId,classId) {
        if(classId != ${classId}){
            layer.msg("对不起，你没有编辑此学生成绩的相应权限",{icon: 5,time:2000});
        }else {
            $.ajax({
                url:"${pageContext.request.contextPath}/page/getStudentGradeByGradeId",
                type:'get',
                data: {
                    "gradeId": gradeId,
                },
                dataType: 'json',
                success: function (result) {
                    if (result.code==0) {
                        showEditModel(result.grade);
                    }else {
                        alert(result.message);
                    }
                },
                error: function (err) {
                    console.log(JSON.stringify(err));
                }
            });
        }
    }


    //迷糊查询板块（根据学生姓名或者学号）
    function search() {
        var searchValue = $("#searchInput").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/page/searchStudentGrade",
            type:'get',
            data:{
                "currentPage":currentPage,
                "pageSize":pageSize,
                "searchValue":searchValue,
            },
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    showList(result.studentGrade)
                }else {
                    showList(0);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err))
            }
        })
    }

</script>

</body>
</html>

